<template>
  <div>
    <el-menu :default-active="$route.path" class="el-menu-vertical-demo" :collapse="isCollapse"
      background-color="#304156" text-color="#fff" active-text-color="#ff9c56">
      <el-menu-item :index="item.path" v-for="item in noChildren" :key="item.path" @click="clickMenu(item)">
        <i :class="item.icon"></i>
        <span slot="title">{{ item.name }}</span>
      </el-menu-item>
      <el-submenu :index="item.name" v-for="(item, index) in hasChildren" :key="index">
        <template slot="title">
          <i :class="item.icon"></i>
          <span slot="title">{{ item.name }}</span>
        </template>

        <el-menu-item :index="subItem.path" v-for="(subItem, subIndex) in item.children" :key="subIndex"
          @click="clickMenu(subItem)">
          <div v-if="subItem.meta.isMenu">
            <i :class="subItem.icon"></i>
            <span slot="title">{{ subItem.name }}</span>
          </div>

        </el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
  import routes from "@/router/Router-config";
  export default {
    data() {
      return {
        menu: routes.slice(4, routes.length),
      };
    },
    created() {},
    computed: {
      isCollapse() {
        return this.$store.state.showshrink;
      },
      //没有子菜单
      noChildren() {
        return this.menu.filter((item) => !item.children);
      },
      //有子菜单 (这样设置会有一个问题 就是有子菜单的 永远会在没有子菜单的下面
      hasChildren() {

        return this.menu.filter((item) => item.children);
      },
    },
    methods: {
      //跳转路由 根据名称跳转
      clickMenu(item) {
        this.$store.commit("selectMenu", item);
        this.$router.push(item.path);
      },
    },
  };

</script>

<style scoped>
  .el-aside {
    color: #333;
  }

  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    height: calc(100vh - 60px);
    overflow-x: hidden;
  }

  .el-menu--collapse {
    height: calc(100vh - 60px);
  }

  /* .el-menu-vertical-demo::-webkit-scrollbar {
  display: block;
}
.el-menu-vertical-demo:hover::-webkit-scrollbar {
  display: block;
  position: relative;
} */

</style>
